<template>
  <div class="loginContent">
    <div class="loginMain">
      <div class="fill">
        <img src="https://img0.baidu.com/it/u=431310748,1064380593&fm=253&fmt=auto&app=138&f=JPEG?w=10&h=10" alt="" />
      </div>
    </div>
    <!--登录表单-->
    <van-form @submit="onSubmit" @failed="onFailed" :show-error-message="false">
      <van-field
        class="input"
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="手机号"
        :rules="[{ validator: verifyPhone, message: '请输入正确的手机号' }]"
      />
      <van-field
        class="input"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ validator: verifyPassword, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          class="loginBtn"
          round
          block
          type="info"
          native-type="submit"
          >登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { phoneLoginApi, getuserAPI } from "../../api/services/login";
import { Toast } from "vant";
import { setToken } from "../../utils/auth";

export default {
  name: "PhoneLogin",
  data() {
    return {
      phone: "15637213957",
      password: "zm15637213957",
      pattern: /^1[3456789]\d{9}$/,
    };
  },
  methods: {
    /**
     * 登录, 登录成功跳转主页
     * @param values
     * @returns {Promise<void>}
     */
    async onSubmit(values) {
      const data = await phoneLoginApi(values.phone, values.password);
      // 返回200为成功, 回到主
      console.log(data);
      if (data.code === 200) {
        setToken(data.token);
        this.$store.commit("changToken", data.token);
        console.log(data.bindings);
        this.$router.push("/like");
      } else {
        // 失败显示错误原因
        Toast.fail({
          message: data.msg,
        });
      }
    },
    async getid(id) {
      const result = await getuserAPI(id);
      console.log(111, result);
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },

    verifyPassword(val) {
      return /^.{6,16}$/.test(val);
    },
    verifyPhone(val) {
      return /^1[3456789]\d{9}$/.test(val);
    },
  },
  created() {
    this.getid(32953014);
  },
};
</script>

<style scoped>
.loginContent {
  display: flex;
  flex-direction: column;
  background-color: rgb(219, 44, 31);
  align-items: center;
  height: 667px;
}
.input {
  margin: 5px auto;
  width: 90%;
  border-radius: 20px;
}
a {
  display: block;
  color: #000;
  margin-bottom: 10px;
  font-size: 14px;
}
.loginBtn {
  background-color: #db2c1fff;
  color: #fff;
  border: none;
}
.fill {
  margin: 100px auto;
}
.fill img{
  width: 100px;
  
}
</style>
